<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
	<link rel="icon" href="logo.png" type="image/x-icon">
	<link rel="shortcut icon" href="logo.png" type="image/x-icon">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<body>



<table class="layui-hide" id="test" lay-filter="test"></table>
<!--<script type="text/html" id="toolbarDemo">-->
<script type="text/html" id="toolbarDemo">
	<div class="layui-row" style="position: absolute;width: 100%;">
		<div class="layui-col-md2">
			<input class="layui-input" type="text" id="name" placeholder="请输入姓名" autocomplete="off"/>
		</div>
		<div class="layui-col-md2" >
			<select id="gender">
				<option value="-1">性别</option>
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
		</div>
		<div class="layui-col-md2">
			<select id="edu">
				<option value="0">教育水平</option>
				<option value="1">小学</option>
				<option value="2">中专</option>
				<option value="3">高职</option>
				<option value="4">大学</option>
				<option value="5">博士</option>
				<option value="6">硕士</option>
			</select>
		</div>
		<div class="layui-col-md2">
			<select id="marriage">
				<option value="-1">婚姻</option>
				<option value="1">已婚</option>
				<option value="0">未婚</option>
			</select>
		</div>
		<div class="layui-col-md2">
			<select id="year">
				<option value="0">工作经验</option>
				<option value="1">无工作经验</option>
				<option value="2">1~3年</option>
				<option value="3">3年以上</option>
			</select>
		</div>
		<div class="layui-col-md2">
			<button type="button" datatype="reload" class="layui-btn" id="search">查询</button>
		</div>

	</div>
</script>
<!--<div class="layui-row" style="position: absolute; left: 20%; top: 10%; width: 60%;">-->

<!--	-->

<!--</div>-->

<!---</script>-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="detail">详细</a>
  	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
          
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>

	//var str = <button className="layui-btn" onClick="showadd('aa')">新增档案</button>
	var option = '<label class=\"layui-form-label margin\">操作    </label>'+
			'<button onclick="showadd(\'upload.html\')">添加</button>'
	var $=layui.jquery;

	function showadd(url){
		layer.open({
			type:2,
			title:'添加员工档案',
			closeBtn:0,
			skin: 'layui-layer-demo',
			area:['800px','600px'],
			content:[url,'yes'],
			btn:['取消'],
			yes:function (index){
				layer.close(index);
			}
		})
	}

layui.use(['jquery','table'], function() {
	var table = layui.table;
	table.render({
		elem: '#test'
		, url: '/data/stuffdata'
		, toolbar: '#toolbarDemo'
		, title: '用户数据表'
		, totalRow: true
		, cols: [
			[
				{type: 'checkbox', fixed: 'left'}
				, {
				field: 'stuffId',
				title: 'ID',
				width: 80,
				fixed: 'left',
				unresize: true,
				sort: true,
				totalRowText: '合计'
			}
				, {field: 'stuffname', title: '员工姓名', width: '', edit: 'text'}
				// ,{field:'sign', title:'积分', width:80, sort: true, totalRow: true}
				// ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
				// ,{field:'score', title:'登入次数', width:100, sort: true, totalRow: true}
				// ,{field:'sign', title:'签名'}
				// ,{field:'city', title:'城市', width:100}
				// ,{field:'ip', title:'IP', width:120}
				// ,{field:'joinTime', title:'加入时间', width:120}
				, {fixed: 'right', title: option, align: 'center', toolbar: '#barDemo', width: 200}
			]
		]
		, page: true
	});

	$(document).on('click', '#search', function (data) {
		console.log("按钮生效了");
		var stuffname1 = $('#name').val();
		var stuffsex1 = $('#gender').val();
		var stuffedu1 = $('#edu').val();
		var stuffmariage1 = $('#marriage').val();
		var worklenght1 = $('#year').val();
		table.reload('test', {
			where: {
				stuffname: stuffname1,
				sex: stuffsex1,
				edu: stuffedu1,
				marriage: stuffmariage1,
				worklenght: worklenght1,
				searchway: "1"
			},
			page: {
				curr: 1
			}
		});

	});
	/*var $ = layui.$, active = {
		reload: function(){
			var demoReload = $('#name');

			//执行重载
			table.reload('test', {
				page: {
					curr: 1 //重新从第 1 页开始
				}
				,where: {

						'stuffname': name.val()

				}
			});
		}
	};

	$('#search').on('click', function(){
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});*/

	//工具栏事件
	table.on('toolbar(test)', function (obj) {
		var checkStatus = table.checkStatus(obj.config.id);
		switch (obj.event) {
			case 'search':
				document.getElementById("myForm").submit()
				break;
		}
		;
	});

	//操作事件
	table.on('tool(test)', function (obj) {
		var data = obj.data
				, layEvent = obj.event;
		if (layEvent === 'detail') {
			layer.open({
				type: 1
				,
				offset: 'auto'
				,
				id: 'layerDemo' //防止重复弹出
				,
				content: '<div style="padding: 20px 100px;">' + '员工编号：' + data.stuffId + '  员工姓名：' + data.stuffname + '<br>' + '员工性别' + data.sex + '</div>'
				,
				btn: '关闭全部'
				,
				btnAlign: 'c' //按钮居中
				,
				shade: 0 //不显示遮罩
				,
				yes: function () {
					layer.closeAll();
				}
			});

		} else if (layEvent === 'edit') {
			console.log(data);
			layer.msg('编辑操作，当前行 ID:' + data.phone);
		} else {
			layer.confirm('真的删除行么', function (index) {
				$.ajax({
					url: "/data/dele",
					type: "POST",
					data: {stuffId: data.stuffId},
					success: function (msg) {
						console.log($(".layui-laypage-limits").find("option:selected").val())
						if (msg === 200) {
							obj.del();
							layer.close(index);
							layer.msg("删除成功", {icon: 1});
						} else {
							layer.msg("删除失败", {icon: 5});
						}
						table.reload('test', {
									page: {
										curr: 1//$(".layui-laypage-skip").find("input").val()
									}
								}
						)
					}
				});
			});
		}
	})
});

</script>

</body>
</html>